<template>
  <div class="orderBoxs">
    <div class="order-con">
      <div class="title">你正在咨询的订单</div>
      <div v-for="goods_item in item.content.has_many_order_goods" :key="goods_item.goods_id" class="order-item-con">
        <div class="order-goods-img">
          <img :src="goods_item.thumb" />
        </div>
        <div class="order-item-txt">
          <div class="order-goods-title">{{ goods_item.title }}</div>
          <div class="order-goods-price">
            <!-- <span class="order-goods-num">x{{goods_item.total}}</span>
          ￥{{goods_item.price}} -->
            共{{ goods_item.total }}件商品：合计￥{{ goods_item.price }}
          </div>
        </div>
      </div>
      <div class="ordersn">订单号：{{ item.content.order_sn }}</div>
      <div class="ordersn">创建时间：{{ item.content.create_time }}</div>
      <div class="ordersn">订单状态：{{ item.content.status_name }}</div>
      <!-- <div class="order-footer">共 {{item.content.goods_total}} 件商品 实付：¥{{item.content.price}}</div> -->
    </div>
    <div class="toOrder" @click.stop="toOrder(item.content)">查看订单</div>
  </div>
</template>
<script>
export default {
  props: ["item"],
  mounted() {
    this.$emit("loaded");
  },
  methods:{
    toOrder(item){
      let json = {
        order_id:item.id,
      }
      json.orderType = "yunChat";
      this.$router.push(this.fun.getUrl("orderdetail", json)); 
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.order-con {
  background: #fff;
  padding: 7px;
  overflow: hidden;

  .title {
    font-size: 14px;
    color: #333;
    font-weight: 400;
    line-height: 1.25rem;
  }

  .order-header {
    width: 100%;
    font-size: 14px;
    padding-top: 10px;

    .order-no {
      color: #666;
      float: left;
    }

    .order-status {
      float: right;
      color: #f15353;
    }

    &::after {
      display: table;
      content: "";
      clear: both;
    }
  }

  .order-item-con {
    display: flex;
    padding: 10px 0 5px 0;
    justify-content: space-between;
    align-items: center;

    .order-goods-img {
      width: 2.75rem;
      height: 2.75rem;
      border-radius: 0.125rem;
      margin-right: 0.25rem;

      img {
        width: 100%;
        height: 100%;
        border-radius: 4px;
      }
    }

    .order-item-txt {
      height: 2.75rem;
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .order-goods-title {
        font-size: 14px;
        color: #000;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .order-goods-price {
        width: 100%;
        text-align: right;
        color: #999;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .order-footer {
    text-align: right;
    color: #666;
    line-height: 1.8;
  }

  .ordersn {
    height: 1.0313rem;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.0313rem;
    color: #666;
    opacity: 1;
    margin-top: 0.5rem;
  }
}

.orderBoxs {
  /* width: 448px; */
  width: 13.75rem;
  overflow: hidden;
}

.toOrder {
  border-top: 1px solid #e3e3e3;
  height: 2.25rem;
  text-align: center;
  background-color: #fff;
  line-height: 2.25rem;
  color: #ef5452;
  font-size: 14px;
}
</style>